<div ng-controller="Umbraco.Install.UserController">
<h1>Install Umbraco 7</h1>

<p>Enter your name, email and password to install Umbraco 7 with its default settings, alternatively you can customize your installation</p>

<form name="myForm" class="form-horizontal" novalidate ng-submit="validateAndInstall();">

	<div class="row">	
		<div class="span8">
			<div class="pull-right">
				<div class="control-group">
					<label class="control-label" for="name">Name</label>
					<div class="controls">
						<input type="text" id="name" name="name" placeholder="Full name" required ng-model="installer.current.model.name" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label" for="email">Email</label>
					<div class="controls">
						<input type="email" id="email" name="email" placeholder="you@example.com" val-email required ng-model="installer.current.model.email" />
						<small class="inline-help">Your email will be used as your login</small>
					</div>
				</div>

				<div class="control-group">
					<label class="control-label" for="password">Password</label>
                    <div class="controls">
                        <!-- why isn't this masked: https://www.nngroup.com/articles/stop-password-masking/ -->
                        <input type="text" name="installer.current.model.password"
                               ng-minlength="{{installer.current.model.minCharLength}}"
                               ng-pattern="passwordPattern"
                               autocorrect="off"
                               autocapitalize="off"
                               autocomplete="off"
                               required
                               ng-model="installer.current.model.password" id="password" />
                        <small class="inline-help">At least {{installer.current.model.minCharLength}} characters long</small>

                        <small ng-if="installer.current.model.minNonAlphaNumericLength > 0" class="inline-help">
                            At least {{installer.current.model.minNonAlphaNumericLength}} symbol{{installer.current.model.minNonAlphaNumericLength > 1 ? 's' : ''}}
                        </small>
                    </div>
				</div>


				<div class="control-group">
					<div class="controls">
						<label>
							<input
								type="checkbox" 
								id="subscribeToNewsLetter" 
								name="subscribeToNewsLetter"
							    ng-model="installer.current.model.subscribeToNewsLetter" /> 
							Keep me updated on Umbraco Versions, Security Bulletins and Community News
						</label>
					</div>
				</div>

				<div class="control-group" ng-class="{disabled:myForm.$invalid}">	
					<div class="controls">
						<input type="submit" ng-disabled="myForm.$invalid"  value="Install" class="btn btn-success" />	
						<a href class="btn btn-info control-customize" ng-disabled="myForm.$invalid" ng-click="validateAndForward()">Customize</a>
					</div>
				</div>

			</div>	
		</div>
	</div>
</form>

</div>
